<!-- <template>
  <el-main
  >
    <bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
    <router-view
      class="router-view"
      style="height: auto; background: transparent"
    ></router-view>
  </el-main>
</template> -->
<template>
  <el-main class="modern-main">
    <bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
    <router-view class="router-view"></router-view>
  </el-main>
</template>
<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      menuList: [],
      role: "",
      currentIndex: -2,
      itemMenu: [],
      title: "",
    };
  },
  mounted() {
    let menus = menu.list();
    this.menuList = menus;
    this.role = this.$storage.get("role");
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // let h = document.getElementsByClassName('el-aside')[0].clientHeight
        // document.getElementsByClassName('el-main')[0].style.minHeight = "calc(100vh - 60px - " + h+'px)'
      });
    },
    menuHandler(menu) {
      this.$router.push({
        name: menu.tableName,
      });
      this.title = menu.menu;
    },
    titleChange(index, menus) {
      this.currentIndex = index;
      this.itemMenu = menus;
      console.log(menus);
    },
    homeChange(index) {
      this.itemMenu = [];
      this.title = "";
      this.currentIndex = index;
      this.$router.push({
        name: "home",
      });
    },
    centerChange(index) {
      this.itemMenu = [
        {
          buttons: ["新增", "查看", "修改", "删除"],
          menu: "修改密码",
          tableName: "updatePassword",
        },
        {
          buttons: ["新增", "查看", "修改", "删除"],
          menu: "个人信息",
          tableName: "center",
        },
      ];
      this.title = "";
      this.currentIndex = index;
      this.$router.push({
        name: "home",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.modern-main {
  --main-bg: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  --content-bg: rgba(255, 255, 255, 0.96);
  --nav-bg: rgba(255, 255, 255, 0.85);
  --primary-color: #3b82f6;
  --hover-color: #2563eb;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  width: 100vw;
  background: var(--main-bg);
  padding: 24px;
  height: 86.5vh;
  transition: all 0.3s ease;
  box-sizing: border-box;
  // .router-view {
  //   width: 95vw;
  //   background: var(--content-bg);
  //   border-radius: 12px;
  //   box-shadow: var(--shadow-md);
  //   padding: 24px;
  //   margin-top: 0;
  //   min-height: calc(100vh - 100px);
  //   backdrop-filter: blur(8px);
  //   border: 1px solid rgba(255, 255, 255, 0.3);
  //   box-sizing: border-box;
  // }
}

// .nav-list {
//   @apply flex flex-wrap gap-4 mb-8 p-4 bg-[var(--nav-bg)] rounded-lg shadow-sm;
//   backdrop-filter: blur(6px);
//   border: 1px solid rgba(241, 245, 249, 0.2);

//   .nav-title {
//     @apply px-6 py-3 rounded-lg font-medium transition-all;
//     color: #64748b;
//     background: rgba(241, 245, 249, 0.5);
//     border: 1px solid transparent;

//     &:hover {
//       transform: translateY(-2px);
//       color: var(--primary-color);
//       box-shadow: var(--shadow-md);
//       background: white;
//       border-color: rgba(59, 130, 246, 0.1);
//     }

//     &.active {
//       @apply bg-[var(--primary-color)] text-white;
//       box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
//     }
//   }
// }

// .nav-item {
//   @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8;
//   background: transparent;

//   .menu {
//     @apply p-6 rounded-xl transition-all;
//     background: var(--nav-bg);
//     border: 1px solid rgba(241, 245, 249, 0.2);

//     &:hover {
//       transform: translateY(-3px);
//       box-shadow: var(--shadow-md);
//     }
//   }
// }

// a {
//   @apply transition-colors;
//   color: #475569;

//   &:hover {
//     color: var(--hover-color);
//     background: transparent;
//   }
// }

// @media (max-width: 768px) {
//   .modern-main {
//     padding: 16px;

//     .router-view {
//       padding: 16px;
//       border-radius: 8px;
//     }
//   }

//   .nav-title {
//     @apply px-4 py-2 text-sm;
//   }

//   .nav-item {
//     @apply grid-cols-1;
//   }
// }
</style>
